import type { PageType } from '../../../../../lib/page_handler/type'
import type {
  BaseStyleConfig,
  IPersonalizationItemConfig,
  PlatformTypeValue,
} from '../../../../../types/interfaces'
import { RangeSlider } from '../../../../../components/range_slider'
import { UserPref } from '../../../../../lib/abstract'
import { ElementManager } from '../../../../../lib/element_manager'
import { BaiduPageType } from '../../../../../lib/page_handler/platform/baidu/types'
import { BingPageType } from '../../../../../lib/page_handler/platform/bing/types'
import { GooglePageType } from '../../../../../lib/page_handler/platform/google/types'
import { SoPageType } from '../../../../../lib/page_handler/platform/so/types'
import { SogouPageType } from '../../../../../lib/page_handler/platform/sogou/types'
import { ConfigManager } from '../../../../../module/config_manager'
import { AppModule } from '../../../../../module/config_manager/types'
import { SEARCH_PLATFORM_STYLES } from '../../../../../module/page_enhancer/appearance/style_enhancement/platforms'
import {
  HOSTNAME,
  SUPPORTED_PLATFORMS,
  VALID_RESULT,
} from '../../../../../types/constants'

export class SearchResultColumns extends UserPref {
  readonly id = 'search_result_columns'
  readonly name = 'SearchResultColumns'
  readonly supportedPages: Partial<Record<PlatformTypeValue, PageType[]>> | '*' = {
    [SUPPORTED_PLATFORMS.BAI_DU]: [
      BaiduPageType.Web,
      BaiduPageType.News,
      BaiduPageType.Video,
    ],
    [SUPPORTED_PLATFORMS.GOOGLE]: [
      GooglePageType.All,
      GooglePageType.Video,
      GooglePageType.News,
      GooglePageType.Web,
    ],
    [SUPPORTED_PLATFORMS.BING]: [
      BingPageType.Web,
    ],
    [SUPPORTED_PLATFORMS.SO_GOU]: [
      SogouPageType.Web,
      SogouPageType.Weixin,
      SogouPageType.Zhihu,
      SogouPageType.Video,
      SogouPageType.Medical,
      SogouPageType.Ask,
      SogouPageType.Encyclopedia,
      SogouPageType.Knowledge,
      SogouPageType.News,
    ],
    [SUPPORTED_PLATFORMS.SO]: [
      SoPageType.Web,
      SoPageType.News,
      SoPageType.Encyclopedia,
    ],
  }

  readonly styleConfigKey = 'searchResultColumns'
  readonly cssProperty = ''
  readonly cssValueSuffix = ''

  // 关闭空的样式元素
  readonly enableEmptyStyleElement: boolean = false
  // 启用页面类型隔离
  usePageTypeIsolation = true

  private readonly rangeSliderLabel: string = '展示列数'
  private readonly defaultMinColumns: number = 1

  constructor(config: IPersonalizationItemConfig) {
    super(config)
  }

  createComponent(config: BaseStyleConfig, value: string, _mode: string, debouncedSave: (() => void) & { flush: () => void }): RangeSlider {
    const id = this.generateId(config.styleVar)
    const remark = config.remark || ''
    const max = ElementManager.getInstance().maxColumns
    return new RangeSlider({
      id,
      label: this.rangeSliderLabel,
      value: Math.min(Number(value) || this.defaultMinColumns, max),
      min: this.defaultMinColumns,
      max,
      step: 1,
      title: remark,
      onChange: (value) => {
        this.cachedValues.set(id, String(value))
        debouncedSave()
      },
      showValue: true,
      disabled: !ConfigManager.getInstance().getFeatureEnabled(AppModule.ThemeStyle.id),
    })
  }

  // 由于直接使用的是 input[type="range"] 传递的值，所以不需要额外的校验逻辑
  handleCheck(value: string): { status: ValidResultType, error: string } {
    if (!value || value.length === 0)
      return { status: VALID_RESULT.SKIP.value, error: '' }
    return { status: VALID_RESULT.VALID.value, error: '' }
  }

  applyStyles(): void {
    this.getInstanceIds().forEach((_id) => {
      Object.entries(SEARCH_PLATFORM_STYLES).forEach(([platform, StyleClass]) => {
        if (platform === HOSTNAME) {
          StyleClass?.getInstance().updateSearchStyle(true)
        }
      })
    })
  }
}
